import React, { useEffect, useState } from 'react'
import logoImgSrc from '@/assets/images/logo.png'
import avaImgSrc from '@/assets/images/defaultAvatar.jpg'
import { Menu, Dropdown, Space, message } from 'antd'
import { CaretDownOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'

export default function Header() {
  const navigate = useNavigate()
  const [userName, setUserName] = useState('用户')
  const [avaSrc, setAvaSrc] = useState(avaImgSrc)

  useEffect(() => {
    if (localStorage.getItem('userData')) {
      const userData = JSON.parse(localStorage.getItem('userData'))
      let { avatar, username } = userData
      setUserName(username)
    }
  }, [])

  const menuOnclick = ({ key }) => {
    // key === 'editInfo' ? editInfo() : logOut()
    // Header[key]()
    
    console.log(this);
  }

  const editInfo = () => {}

  /**
   * @description: 退出登录
   * @param {*}
   * @return {*}
   */
  const logOut = () => {
    console.log('退出');
  /*   message.success('正在退出')
    localStorage.clear()
    setTimeout(() => navigate('login'), 1500) */
  }

  const menu = (
    <Menu
      onClick={key => menuOnclick(key)}
      items={[
        {
          label: <span href="#!">修改资料</span>,
          key: 'editInfo'
        },
        {
          type: 'divider'
        },
        {
          label: <span href="#!">退出登录</span>,
          key: 'logOut'
        }
      ]}
    />
  )
  return (
    <header>
      <img src={logoImgSrc} alt="logo" className="logo" />
      <Dropdown overlay={menu}>
        <a className="ava-link" onClick={e => e.preventDefault()}>
          <Space>
            <img className="ava-img" src={avaSrc} alt="" />
            <span className="username-span">{userName}</span>
            <CaretDownOutlined className="triangle" />
          </Space>
        </a>
      </Dropdown>
    </header>
  )
}
